<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="10">
        <div class="header-box">
          <div>
            <span style="font-weight: bolder">{{ form.userName }}</span>
            （{{ form.registerNoticeVo.jobNumber }}）
            <el-tag v-if="form.currentStatus == 1" type="success">{{
              form.currentStatusName
            }}</el-tag>
            <el-tag v-if="form.currentStatus == 2" type="warning">{{
              form.currentStatusName
            }}</el-tag>
            <el-tag v-if="form.currentStatus == 3" type="danger">{{
              form.currentStatusName
            }}</el-tag>
          </div>
          <div>进修科目：{{ form.registerDeptName }}</div>
          <div>
            进修日期：{{ form.durationStartDate }} - {{ form.durationEndDate }}
          </div>
          <div>单位名称：{{ form.unitHospitalName }}</div>
        </div>
        <div class="leave-box">
          <div class="item">
            <div class="value">{{ personalDays }}</div>
            <div>事假(天)</div>
          </div>
          <div class="item">
            <div class="value">{{ sickDays }}</div>
            <div>病假(天)</div>
          </div>

          <div class="item">
            <div class="value">{{ form.registerLeaveVoList.length }}</div>
            <div>请假次数</div>
          </div>
          <div class="item">
            <div class="value">{{ realLeaveDays }}</div>
            <div>真实请假(天)</div>
          </div>
          <div class="item">
            <div class="value">{{ closeDays }}</div>
            <div>销假天数(天)</div>
          </div>

          <!-- <div class="item">
            <div class="value">{{ expiredDuration }}</div>
            <div>已过期未销假天数</div>
          </div> -->
        </div>
      </el-col>
      <el-col :span="10">
        <div
          id="leaveEcharts"
          ref="leaveEcharts"
          style="width: 100%; height: 250px"
        ></div>
      </el-col>
    </el-row>
    <div class="separate-box"></div>
    <div style="font-size: 16px; font-weight: bolder; margin-bottom: 15px">
      请假记录
    </div>
    <el-table :data="form.registerLeaveVoList">
      <!--<el-table-column label="进修科目" align="center" prop="registerDeptName"/>
      <el-table-column label="姓名" align="center" prop="userName"/>
      <el-table-column label="工号" align="center" prop="jobNumber" width="170"/>
      <el-table-column label="请假状态" align="center" prop="leaveStatus">
        <template slot-scope="scope">
          {{ leaveStatusList[scope.row.leaveStatus - 1].name }}
        </template>
</el-table-column>-->
      <el-table-column
        label="申请时间"
        align="center"
        prop="createTime"
        width="170"
      >
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.createTime, "{yyyy}/{mm}/{dd} {hh}:{ii}:{ss}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="请假类型" align="center" prop="leaveType">
        <template slot-scope="scope">
          {{ leaveTypeList[scope.row.leaveType - 1].name }}
        </template>
      </el-table-column>
      <el-table-column
        label="请假开始时间"
        align="center"
        prop="leaveStartDate"
      />
      <el-table-column
        label="请假结束时间"
        align="center"
        prop="leaveEndDate"
      />
      <el-table-column label="请假时长" align="center" prop="leaveDuration">
        <template slot-scope="scope">
          {{ scope.row.leaveDuration }}天
        </template>
      </el-table-column>
      <el-table-column label="销假时间" align="center" prop="closeDate" />
      <el-table-column label="销假时长" align="center" prop="closeDuration">
        <template slot-scope="scope">
          <span v-if="scope.row.closeDuration"
            >{{ scope.row.closeDuration }}天</span
          >
        </template>
      </el-table-column>
      <el-table-column label="请假条" align="center" prop="leavePicture">
        <template slot-scope="scope">
          <image-preview
            :src="baseURL + scope.row.leavePicture"
            width="50px"
            height="50px"
          />
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center; margin-top: 10px">
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { consts } from "@/api/business/consts";
import { getRegisterInfo } from "@/api/business/registerInfo";

export default {
  props: {
    registerId: null,
  },
  data() {
    return {
      // 根路径
      baseURL: process.env.VUE_APP_BASE_API,
      form: {
        registerNoticeVo: {},
        registerLeaveVoList: [],
        registerManualVo: {},
        registerAllocationVoList: [],
      },
      leaveDuration: 0,
      expiredDuration: 0,
      realLeaveDays: 0, // 真实请假天数
      sickDays: 0, // 病假天数
      personalDays: 0, // 事假天数
      closeDays: 0, // 销假天数
      leaveStatusList: consts.leaveStatusList,
      leaveTypeList: consts.leaveTypeList,
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      getRegisterInfo(this.registerId).then((response) => {
        this.form = response.data;
        this.sickDays = response.data.leaveStat.sickDays;
        this.realLeaveDays = response.data.leaveStat.realLeaveDays;
        this.personalDays = response.data.leaveStat.personalDays;
        this.closeDays = response.data.leaveStat.closeDays;
        this.leaveStatusDesc = response.data.leaveStatusDesc;

        if (this.form.registerLeaveVoList.length > 0) {
          const { leaveDuration, expiredDuration, closeStatus } =
            this.calculateLeaveStats(this.form.registerLeaveVoList);
          this.leaveDuration = leaveDuration;
          this.expiredDuration = expiredDuration;
          this.form.closeStatus = closeStatus;
        }
      });
    },
    calculateLeaveStats(leaveList) {
      let leaveDuration = 0;
      let expiredDuration = 0;
      let closeStatus = false;

      for (let item of leaveList) {
        leaveDuration += item.leaveDuration;
        if (item.effectiveStatus == 1) {
          expiredDuration += item.leaveDuration;
        }
        if (!closeStatus && item.effectiveStatus != 2) {
          closeStatus = true;
        }
      }

      return { leaveDuration, expiredDuration, closeStatus };
    },
    openLeaveClose() {
      this.$emit("openLeaveClose");
    },
    closeDialog() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.separate-box {
  margin: 10px 0;
  border-bottom: 2px dashed #f2f3f5;
}

.header-box {
  line-height: 30px;
}

.leave-box {
  display: flex;
  margin-top: 15px;

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    min-width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: #f2f3f5;
    border-radius: 10px;

    .value {
      font-size: 22px;
      font-weight: bolder;
    }
  }
}
</style>
